<template lang="">
  <div class="content">
    <div class="main"
      style="border:0px solid #000;height:auto;display: flex;flex-direction: row;justify-content:space-between;width: 1560px;min-width: 1200px;">
      <div class="left" style="width:770px;border: 0px solid #000;">
        <!-- 报销提示 -->
        <div class="top"
          style="padding:10px 20px;float: left; width: 335px;border: 0px solid #000;border-radius: 10px;background-color: #fff;">
          <div class="title">
            <div class="logo" style="float: left;">
              <img src="../assets/images/crm_67.png" alt="">
              <span style="position: relative;top: -6px;left: 2px;">报销提示</span>
            </div>
          </div>
          <div class="main">
            <ul
            style="list-style: none;padding: 0;">
              <li v-for="item1 in List1" :key="item1.reimburseId"
                style="line-height:20px;margin-top:50px;margin-bottom:-30px;width:290px;border:0px dashed #ccc;height: auto;text-align: left;padding: 20px;background-color: #f5f5f7;border-radius: 10px;">
                <span class="bt">{{item1.realname}}</span><br>
                <span class="nr">项目：{{item1.businessName}} <br>说明：{{item1.describes}} <br>
                  时间 ：{{moment(item1.createTime).format('YYYY年MM月DD日 HH:mm')}}
                </span><br>
                <span class="nr">报销类型：</span>
                <span class="nr" v-if="item1.reimburseType == 0">普通</span>
                <span class="nr" v-if="item1.reimburseType == 1">差旅</span>
                <span class="nr" v-if="item1.reimburseType == 2">采购</span>
                <span class="nr" v-if="item1.reimburseType == 3">商务</span><br>
                <span style=" color: #888;font-size: 14px;">金额：<span style=" color:rgb(255, 136, 0);font-size: 14px;">￥{{item1.amount}}
                 </span> <br>
                 
                </span>
                <span class="nr" style="color: #888;font-size: 14px;">状态：</span>
                <span class="nr" v-if="item1.reimburseStatus == 0" >待审批</span>
                <span class="nr" v-if="item1.reimburseStatus == 11" >主管通过</span>
                <span class="nr" v-if="item1.reimburseStatus == 12" >已通过</span>
                <span class="nr" v-if="item1.reimburseStatus == 13" >已付款</span>
                <span class="nr" v-if="item1.reimburseStatus == 2" >驳回</span><br>
              </li>
            </ul>
          </div>

        </div>
        <!-- 合同进度提示 -->
        <div class="bottom"
          style="padding:10px 20px;float: right; width: 335px;border: 0px solid #000;border-radius: 10px;background-color: #fff;">
          <div class="title">
            <div class="logo" style="float: left;">
              <img src="../assets/images/crm_34.png" alt="">
              <span style="position: relative;top: -6px;left: 2px;">合同进度提示</span>
            </div>
          </div>
          <div class="main">
            <ul style="list-style: none;padding: 0;">
              <li v-for="(item2,index) in List" :key="index"
                style="line-height:20px;margin-bottom:0px;float:left;border:1px dashed #ccc;height: auto;text-align: left;padding: 10px 20px;width: 290px;margin-top: 20px;">
                <span class="bt">{{item2.contractName}}</span><br>
                <span style="color: #888;font-size: 14px;">金额：<span style=" color:rgb(255, 136, 0);">￥{{item2.amount}}</span></span>                 
                <span class="nr">{{item2.contractAmount}}<br>负责人：{{item2.realname}} <br>
                <span class="nr">状态：{{item2.status == 0 ? '未完成' : '已完成'}}</span></span><br>
                <span class="nr">提醒时间 :{{moment(item2.remindTime).format('YYYY年MM月DD日 HH:mm')}}</span>
              </li>
            </ul>

          </div>
        </div>
      </div>
      <div class="right" style="width: 770px;border: 0px solid #000;height: auto;">
        <!-- 消息列表 -->
        <div class="box1"
          style="padding:10px 20px;float: left;width: 335px;border: 0px solid #000;border-radius: 10px;background-color: #fff;">
          <div class="title">
            <div class="logo" style="float: left;">
              <img src="../assets/images/crm_40.png" alt="">
              <span style="position: relative;top: -6px;left: 2px;">消息列表</span>
            </div>

          </div>
          <div class="main">
            <ul style="list-style: none;padding: 0;">
              <li v-for="item3 in List3" :key="item3.followId"
                style="line-height:25px;margin-bottom:10px;float:left;border-bottom:1px solid #ccc;height: auto;text-align: left;padding: 15px 20px;width: 290px;">
                <span class="bt">{{item3.newsType}}</span><br>
                <span class="nr">内容：<span style="color:rgb(255, 136, 0);">{{item3.newsContent}}</span></span><br>
                <span class="nr">时间 : {{moment(item3.createTime).format('YYYY年MM月DD日 HH:mm')}}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 跟进动态 -->
        <div class="box2"
          style="padding:10px 20px;float: right; width: 335px;border: 0px solid #000;border-radius: 10px;background-color: #fff;">
          <div class="title">
            <div class="logo" style="float: left;">
              <img src="../assets/images/crm_37.png" alt="">
              <span style="position: relative;top: -6px;left: 2px;">跟进动态</span>
            </div>
          </div>
          <div class="main">
            <ul style="list-style: none;padding: 0;border: 0px solid #000;">
              <li v-for="(item4,index4) in List2" :key="index4"
                style="line-height:25px;margin-bottom:10px;float:left;border-bottom:1px solid #ccc;height: auto;text-align: left;padding: 10px 20px;width: 335px;margin-left: -20px;">
                <span style="font-size: 16px;color: rgb(2, 83, 233);">{{item4.businessName}}</span><br>
                <span class="nr">{{item4.content}}</span><br>               
                <span class="nr">负责人：{{item4.salesmanName}}</span><br>
                <span class="nr">联系人：{{item4.linkmanName}}</span><br>
                <span class="nr" >开始时间 : {{moment(item4.startTime).format('YYYY年MM月DD日 HH:mm')}}</span>
              </li>
            </ul>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        current: 0,
        size: 100,
        List: [],
        List1: [],
        List2: [],
        List3: [],
        newsId: '',
        followId: '',
        reimburseId: '',
        contractId: '',
        userId: this.$cookies.get("userId"),

      }
    },
    mounted() {
      this.getContractList()
      this.getApplyList()
      this.getProcedureList()
      this.getNewsList()
    },
    methods: {
      moment,
      // 获取合同列表
      async getContractList() {
        // 解构出参数
        const { current, size } = this;
        var data = {
          current: current,
          size: 10,
        }
        let result = await this.$API.agreement.reqSchedule(data)
        this.total = result.data.total;
        this.List = result.data.data
      },
      // 报销列表查询
      async getApplyList() {
        // 解构出参数
        const { current, size } = this;
        var data = {
          current: current,
          size: 10,
          userId:this.userId

          // reimburseId:reimburseId
        }
        let result = await this.$API.apply.reqApplyList1(data);
        // console.log(result)
        this.total = result.data.total;
        this.List1 = result.data.data
      },
      //跟进过程查询
      async getProcedureList() {
        // 解构出参数
        const { current, size } = this;
        // 获取资源列表接口
        var data = {
          current: current,
          size: 10,
        }
        let result = await this.$API.change.reqProcedureList(data);
        if (result.data.code === 200) {
          this.total = result.data.total;
          this.List2 = result.data.data;
        } else {
          alert(result.data.message)
        }

      },
      //消息查询
      async getNewsList() {
        // 解构出参数
        const { current, size } = this;

        var data = {
          current: current,
          size: 10,
        }
        let result = await this.$API.news.reqNewsList(data);
        if (result.data.code === 200) {
          this.total = result.data.total;
          this.List3 = result.data.data;
        } else {
          alert(result.data.message)
        }

      },
    }

  }
</script>
<style>
  @import "../style/style.css";
  .bt{
    font-size: 16px;
  }
  .nr{
    color: #888;
    font-size: 14px;
  }
</style>